<!-- 个人基本信息 -->
<template>
    <div class="baseuserinfo-container">

        <!-- 基本信息包裹层 -->
        <div class="baseuserinfo-content-main">
            <van-form>
                 <!-- 个人基本信息 -->
                 <div class="userinfo-history  category-container" >
                     <div class="category-title">
                         <span class="title-text">个人信息</span>
                     </div>
                         <van-cell-group  inset>
                             <!-- 姓名 -->
                             <van-field v-model="baseuserinfoData.sca06" label="姓名" placeholder="请输入姓名"  />
                             <!-- 性别 -->
                             <van-field v-model="baseuserinfoData.itemcontrol.sexText" label="性别" placeholder="请选择性别" @click="baseuserinfoData.itemcontrol.isSexSelectShow = true" />
                             <van-row>
                                 <!-- 年龄 -->
                                 <van-col span="16">
                                     <van-field v-model="baseuserinfoData.sca12" type="digit" label="年龄" placeholder="请输入年龄" />
                                 </van-col>
                                 <!-- 年龄单位 -->
                                 <van-col span="8">
                                     <van-field readonly is-link v-model="baseuserinfoData.itemcontrol.ageUnitText" @click="baseuserinfoData.itemcontrol.isAgeunitSelectShow = true" />
                                 </van-col>
                             </van-row>
                             <!-- 出生日期 -->
                             <van-field readonly is-link v-model="baseuserinfoData.sca11" label="出生日期" placeholder="请选择出生日期" @click="baseuserinfoData.itemcontrol.isBirthdayDateShow = true" />
                             <!-- 证件号码 -->
                             <van-field v-model="baseuserinfoData.sca22" label="证件号码" placeholder="请输入身份证号码" :rules="[{ validator: verfyCertificatFn }]"/>
                         </van-cell-group>
                     
                     <Teleport to="body">
                         <!-- 出生日期 -->
                         <van-popup v-model:show="baseuserinfoData.itemcontrol.isBirthdayDateShow" round position="bottom" :style="{ height: '50%' }">
                             <van-date-picker
                               v-model="baseuserinfoData.itemcontrol.birthdayDate"
                               title="选择日期"
                               ref="birthdayDateRef"
                               @cancel="baseuserinfoData.itemcontrol.isBirthdayDateShow = false"
                               @confirm="confirmBirthdayDateFn($event)"
                               :min-date="new Date(1940, 0, 1)"
                               :max-date="new Date()"
                             >
                                 <template #confirm>
                                     <div class="calendar-title-container">
                                         <span class="calendar-title-clear" @click="clearBirthdayDateFn()">清空</span>
                                         <span @click="birthdayDateRefFn">确认</span>
                                     </div>
                                 </template>
                             </van-date-picker>
                         </van-popup>
                         <!-- 年龄单位 -->
                         <van-popup v-model:show="baseuserinfoData.itemcontrol.isAgeunitSelectShow" round position="bottom" :style="{ height: '50%' }">
                             <van-picker
                               v-model="baseuserinfoData.itemcontrol.ageUnitValue"
                               title="年龄单位"
                               :columns="ageUnitData"
                               @cancel="baseuserinfoData.itemcontrol.isAgeunitSelectShow = false"
                               @confirm="confirmAgeunitFn"
                             />
                         </van-popup>
                         <!-- 性别 -->
                         <van-popup v-model:show="baseuserinfoData.itemcontrol.isSexSelectShow" round position="bottom" :style="{ height: '50%' }">
                             <van-picker
                               v-model="baseuserinfoData.itemcontrol.sexValue"
                               title="性别"
                               :columns="sexData"
                               @cancel="baseuserinfoData.itemcontrol.isSexSelectShow = false"
                               @confirm="confirmSexFn"
                             />
                         </van-popup>
                     </Teleport>
                 </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, watch } from 'vue';
import { onMounted } from 'vue';
import { VerfyCertificat } from '@/utils/tools.js'
import { cloneDeep } from 'lodash';

    // 元素挂载后执行
    onMounted(() => {
        
    });

    const birthdayDateRef = ref(null);

    // 年龄单位下拉数据
    const ageUnitData = [
        { text: '岁', value: 'Y' },
        { text: '月', value: 'M' },
        { text: '周', value: 'W' },
        { text: '天', value: 'D' },
        { text: '小时', value: 'H' },
        { text: '分', value: 'N' },
    ];

    // 性别下拉数据
    const sexData = [
        { text: '男', value: '1' },
        { text: '女', value: '2' },
        { text: '未知', value: '0' },
    ];

    // 单条放射职业史数据
    const baseuserinfoData = reactive({
                sca06: '', //姓名
                sca12: '', //年龄
                abw01: '1', //性别
                aau01: 'Y', //年龄单位
                sca11: '', //出生年月
                sca22: '', //身份证号码
                itemcontrol: {
                    sexValue: ['1'],
                    sexText: '男',
                    isSexSelectShow: false,
                    ageUnitValue: ['Y'],
                    ageUnitText: '岁',
                    isAgeunitSelectShow: false,
                    birthdayDate: [],
                    isBirthdayDateShow: false,
                }
    });

    // 身份证号码校验
    const verfyCertificatFn = (idCard) => {
        debugger;
        if (VerfyCertificat(idCard)) {
            return true;
        } else {
            return '您输入的身份证号码有误,请核对...';
        }
    }

    // 确认年龄单位
    const confirmAgeunitFn = ($event) => {
        debugger;
        let selectedObj = $event.selectedOptions[0];
        let selectedText = selectedObj['text'];
        let selectedValue = selectedObj['value'];
        baseuserinfoData.aau01 = selectedValue;
        baseuserinfoData.itemcontrol.ageUnitText = selectedText;
        baseuserinfoData.itemcontrol.ageUnitValue = [...selectedValue];
        baseuserinfoData.itemcontrol.isAgeunitSelectShow = false;
    }

    // 确认性别
    const confirmSexFn = ($event) => {
        debugger;
        let selectedObj = $event.selectedOptions[0];
        let selectedText = selectedObj['text'];
        let selectedValue = selectedObj['value'];
        baseuserinfoData.abw01 = selectedValue;
        baseuserinfoData.itemcontrol.sexText = selectedText;
        baseuserinfoData.itemcontrol.sexValue = [...selectedValue];
       baseuserinfoData.itemcontrol.isSexSelectShow = false
    }
    // 出生日期 自定义按钮调用确认方法
    const birthdayDateRefFn = () => {
        debugger;
        birthdayDateRef.value.confirm();
    }

    // 确认出生日期
    const confirmBirthdayDateFn = ($event) => {
        debugger;
        let birthdayDateArr = $event.selectedValues || [];
        if (birthdayDateArr.length == 0) {
            baseuserinfoData.itemcontrol.birthdayDate = [];
            baseuserinfoData.sca11 = '';
            return;
        };
        baseuserinfoData.itemcontrol.birthdayDate = birthdayDateArr;
        baseuserinfoData.sca11 = birthdayDateArr[0] + '-' + birthdayDateArr[1] + '-' + birthdayDateArr[2];
        baseuserinfoData.itemcontrol.isBirthdayDateShow = false
    }

    // 清空出生日期
    const clearBirthdayDateFn = () => {
        debugger
        baseuserinfoData.itemcontrol.birthdayDate = [];
        baseuserinfoData.sca11 = '';
        baseuserinfoData.itemcontrol.isBirthdayDateShow = false
    }

    const getFormData = () =>{
        
        let baseuserinfoDataCloneData = cloneDeep(baseuserinfoData);
        delete baseuserinfoDataCloneData['itemcontrol']

        return {
            baseuserinfoObjData: baseuserinfoDataCloneData,
        }
    }
    
    defineExpose ({
        getFormData,
    });

</script>

<style scoped>

    .calendar-title-container {
        display: flex;
        justify-content: space-around;
        .calendar-title-clear {
            margin-right: 20px;
            color: #ddd;
            font-weight: 500;
        }
    }

    .baseuserinfo-container {

        margin: 20px 18px 100px;
        
        .baseuserinfo-content-main {

            margin: 20px 10px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: -2px 8px 18px #ddd;
        }

        .category-container {
               .category-title {
                   background-color: #e1f2f9;
                   display: flex;
                   align-items: center;
                   padding: 5px 20px;
                   justify-content: space-between;
               
                   .title-text {
                    font-size: 28px;
                    color:rgb(62, 175, 224);
                    font-weight: 700;
                   }
               }
               
                .category-content {
                   .item-nowarp :deep(.van-field__label) {
                      width: unset;
                   } 
                }
               
            }
        
    }

</style>